<!-- Copyright (c) 2022 渝州大数据实验室
 *
 * Lanius is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 *
 *     http://license.coscl.org.cn/MulanPSL2
 *
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 -->
<!-- 
* @desc:消息组件
* @fileName:HeaderMessage.vue
* @author:zoujunjie
* @date:2022-05-24
!-->
<template>
  <el-popover :width="370" popper-class="message-popover" :disabled="hidePopup">
    <template #reference>
      <el-badge
        :max="99"
        :value="100"
        class="link-item hover-cursor-pointer"
        @click="onClick"
      >
        <header-icon-item :icon-url="iconBell"></header-icon-item>
      </el-badge>
    </template>
    <template #default>
      <div class="message-popover-content">
        <div
          class="flex align-items-center justify-content-space-between title-container"
        >
          <span class="title">消息通知</span>
          <el-link type="primary" class="link" href="/message"
            >查看所有通知</el-link
          >
        </div>
        <div>
          <el-scrollbar :height="300">
            <div
              class="message-item flex align-items-center justify-content-space-between hover-cursor-pointer"
              @click="onClick"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器 于2022/5/9 9：00 恢复为正常，请知悉！
              </div>
            </div>
            <div
              class="message-item flex align-items-center justify-content-space-between"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器
              </div>
            </div>
            <div
              class="message-item flex align-items-center justify-content-space-between"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！
              </div>
            </div>
            <div
              class="message-item flex align-items-center justify-content-space-between"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！
              </div>
            </div>
            <div
              class="message-item flex align-items-center justify-content-space-between"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！
              </div>
            </div>
            <div
              class="message-item flex align-items-center justify-content-space-between"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！
              </div>
            </div>
            <div
              class="message-item flex align-items-center justify-content-space-between"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！
              </div>
            </div>
            <div
              class="message-item flex align-items-center justify-content-space-between"
            >
              <div class="icon"></div>
              <div class="content text-ellipsis-2">
                食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！食药环案侦数据采集服务器 于2022/5/9 9：00
                恢复为正常，请知悉！
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
import HeaderIconItem from "./HeaderIconItem.vue";
import iconBell from "@/assets/img/layout/header/icon-bell.png";
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();

let hidePopup = computed(() => {
  return useRoute().path == "/message";
});

const onClick = () => {
  if (!hidePopup.value) {
    router.push("/message");
  }
};
</script>

<style lang="scss">
.el-popover.el-popper.message-popover {
  padding: 0;
}
</style>

<style lang="scss" scoped>
.message-popover-content {
  height: 340px;
  .title-container {
    height: 40px;
    border-bottom: 1px solid #e6e6e6;
    .title {
      font-weight: 700;
      color: #000000;
      font-size: 14px;
      line-height: 20px;
      margin-left: 15px;
    }
    .link {
      margin-right: 15px;
      font-size: 14px;
    }
  }

  .message-item {
    margin-top: 15px;
    margin-bottom: 15px;
    .icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid var(--el-color-primary);
      margin-left: 15px;
    }
    .content {
      width: 304px;
      height: 40px;
      font-weight: 700;
      color: #000000;
      font-size: 14px;
      line-height: 20px;
      margin-right: 15px;
    }
  }
}
</style>
